nuke-mask

Mask

• category: Components
• chinese: 遮罩层
• type: 基本

---

Nuke UI

何时使用

Mask 是一个简单的遮罩层，常用于展示上层的对话框、提示等

设计思路

新增 web 端支持

注意 weex < 0.15 的安卓客户端，mask 可能存在兼容性问题，请慎用

Mask 在 native 端封装了 mask 组件，在 web 端使用 View 封装，因此如果要实现遮挡全屏的效果，对组件层级和样式书写有如下要求：

• 页面根节点不能有任何 padding、margin、border 样式 （确保边缘不漏出来）
• Mask 组件必须是根节点的最后一个子元素 （确保 View 堆叠顺序）

API

参数	说明	类型	默认值
style	样式object	obj
animate	显示时是否开启动画	boolean	true
effect	显示的动画效果，animate = true 时生效，枚举值可选：ease-in,ease-in-out,ease-out,linear,cubic-bezier	string	'ease-in-out'
maskClosable	能否点击空白区域关闭	boolean	false
duration	动画时长，默认 200（单位是 ms）	number	200
contentStyle	内容 style, 如果 Mask 的Children 数量超过1个，可能需要使用。参见如下解释	obj

关于 contentStyle

如果 Mask 标签内部不止 1 个子组件，默认我们会在 children 外面再包一层 View，contentStyle 为了控制这层 View 的样式。

实例方法：

• this.refs.myMask.show() : 显示浮层
• this.refs.myMask.hide() : 关闭浮层

demo 参考

扫码预览(手淘、千牛、天猫等)

使用方法

• 安装

// 切换到你的 rax 项目中
tnpm i nuke-mask --save
// 参考如下 demo 您可能还需要安装
// tnpm i nuke-view nuke-text nuke-checkbox nuke-button nuke-page --save

• 调用示例

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import Input from 'nuke-input';
import View from 'nuke-view';
import Text from 'nuke-text';
import Env from 'nuke-env';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';
const {isWeb} =Env;
let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.GroupFruit = [
            {value: 'zj', label: '浙江'},
            {value: 'ah', label: '安徽'},
            {value: 'sh', label: '上海'}
        ];
        this.state = {
            fruitChecked:['ah'],
        }
    }
    showMask(){
        this.refs.myMask.show();
    }
    hideMask(){
        this.refs.myMask.hide();
    }
    
    onChange =(value) =>{

        this.setState({
            fruitChecked:value
        })
    }
    render() {
        return (
            <Page title="Mask">
                <Page.Intro main="浮层中嵌入简易表单操作"></Page.Intro>
                <View style={styles.result}>
                    {this.state.fruitChecked ? <Text style={styles.resultText}>已选择： {this.state.fruitChecked.join(',')}</Text> :null}
                </View>
                <Button type="primary" onPress={(e)=>this.showMask()}>打开浮层(空白区域不能关闭)</Button>
                <Mask defaultVisible={false} ref="myMask" animate={true} style={styles.mask} contentStyle={styles.body}>
                    
                        <View style={styles.head}><Text style={styles.textHead}>选择区域</Text></View>
                        <View style={styles.topicsWrap}>
                            <Checkbox.Group value={this.state.fruitChecked} onChange={ this.onChange } size="small" dataSource={ this.GroupFruit }  style={{marginRight:10}}></Checkbox.Group>
                        </View>
                         <View style={styles.footer}>
                            <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
                           
                        </View>
                   
                </Mask>
                
                
            </Page>
        );
    }
}
const styles={
    textarea:{
        // position:'absolute'
        width: '600rem',
        height: '200rem',
        borderWidth:'1rem',
        borderStyle:'solid',
        borderColor:'#cccccc'
    },
    mask:{
        flex:1,
        backgroundColor:'rgba(0,0,0,0.7)',
        justifyContent: 'flex-end',
    },

    body: {
        width: '750rem',
        height: '468rem',
        borderRadius:'8rem',
        
        paddingTop:30,
        borderRadius:'8rem',
        backgroundColor: '#ffffff',
      },
      head:{
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomColor:'#eeeeee',
        borderBottomStyle:'solid',
        borderBottomWidth:'1rem',
      },
      textHead:{
        color:'#3d4145',
        fontSize:32,
      },
      topics:{
        paddingLeft:40,
        paddingRight:40,
        flexDirection:'row',
      },
      text:{
        fontSize:'28rem',
        padding:'10rem',
        color:'#3089dc',
        borderColor:'#3089dc',
        borderStyle:'solid',
        borderWidth:'1rem',
        marginRight:'20rem'
      },
      footer: {
        borderTopColor:'#dddddd',
        flexDirection:'row',
        borderTopStyle:'solid',
        borderTopWidth:1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        height: '94rem'
      },
      dlgBtn:{
        flex:1,
      },
      result : {
        height:'480rem',
        margin:'30rem',
        padding:'10rem',
        backgroundColor:'#ffffff',
        justifyContent:'center',
        alignItems:'center'
    },
    resultText : {
        fontSize:'28rem'
    },
}
render(<App/>);

其他

• bug、建议联系 @翊晨
• 钉钉交流群